<template>
    <div class="welcome">
        <el-row :gutter="10">
            <el-col :span="11" class="col1">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="图书馆温湿度显示" name="first" style="align-content: center">
<!--                                                <div id="weather-view-he"></div>-->
                      <div id="tem" class="tem"></div>

                      <div id="tem1" class="tem"></div>
                    </el-tab-pane>
                </el-tabs>


            </el-col>
            <el-col :span="11" class="col2">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="系统介绍" name="first" style="align-content: center">
                        <el-collapse accordion>

                            <el-collapse-item>
                                <template slot="title">
                                    进馆模块<i class="header-icon el-icon-info"></i>
                                </template>
                                <div> 进馆查询可以查看每位同学进馆时的体温，应对新冠疫情下的防范。<br>
                                    <span style="color: red">本系统中管理员可以查看所有人，其余角色查看自己进馆记录</span></div>
                            </el-collapse-item>
                            <el-collapse-item>
                                <template slot="title">
                                    权限模块<i class="header-icon el-icon-info"></i>
                                </template>
                                <div> 权限控制是一个企业对工作人员的权利进行管控的重要一部分<br>
                                    <span style="color: red">本系统中权限控制能够分别从角色和角色权限进行管理</span></div>
                            </el-collapse-item>
                            <el-collapse-item>
                                <template slot="title">
                                    图书管理模块<i class="header-icon el-icon-info"></i>
                                </template>
                                <div> 图书管理模块是本系统最重要的模块，用于将图书查看、借阅、还书。 <br>
                                    <span style="color: red">本系统中图书模块采用RFID借阅书籍、极大的便利了借书还书的流程，还减少了疫情期间人员的接触。</span></div>
                            </el-collapse-item>
                            <el-collapse-item>
                                <template slot="title">
                                    图书位置查看模块<i class="header-icon el-icon-info"></i>
                                </template>
                                <div> 图书位置可以通过该模块清晰的查看图书的具体位置，为学生的找书和图书管理员的管理带来了极大的便利。<br>
                                    <span style="color: red">图书位置可以通过该模块清晰的查看图书的具体位置，为学生的找书和图书管理员的管理带来了极大的便利。</span></div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <!-- 第二列布局 -->
        <el-row :gutter="10">
            <el-col :span="11" class="col1">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="图书货架状态" name="first" style="align-content: center">
                        <div id="main" style="width: 560px;height:270px;"></div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="11" class="col2">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="图书馆内烟雾浓度检测" name="first" style="align-content: center">
                        <el-row>
<!--                            <el-col :span="9">-->
                                <div id="main1" style="width: 220px;height:240px; margin:0 auto;"></div>
<!--                            </el-col>-->
<!--                            <el-col :span="13" style="margin-top: 20px;color:#0C61B8">-->
<!--                                <span>生产线名称：{{outList.name}}</span><br>-->
<!--                                <span>货物订单号：{{outList.orderNum}}</span><br>-->
<!--                                <span>生产中货物：{{outList.orderName}}</span><br>-->
<!--                                <span>计划生产数量：{{outList.total}}</span><br>-->
<!--                                <span>已完成进度：{{outList.percentage}}%</span>-->
<!--                            </el-col>-->
                        </el-row>


                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import echarts from "echarts";
    import dark from '@/assets/ech/dark.js'
    import 'echarts-liquidfill'

    export default {
      data() {
        return {
          activeName: 'first',
          outName: 'first',
          infoDialog: false,
          outList: {},
          warehouse: [],
          temperature: 0,
          humidity: 0,
          yanwu: 0
        }
      },
      beforeDestroy() {
        // console.log('离开')
        clearInterval(this.clearTimeSet) //销毁定时器
      },
      methods: {
        setTime() {
          //设置定时器
          this.clearTimeSet = setInterval(() => {
            this.gettingData()
          }, 1500)
        },
        clearTime() {
          //清除定时器
          clearInterval(this.clearTimeSet)
        },
        async gettingData() {
           // console.log("请求这里了")
           const wen = await this.$http.get('/output/findTemp');
           if (wen) {
            // console.log("这是数据")
            // console.log(wen);
             this.temperature = wen.obj.temperature;
             this.humidity = wen.obj.humidity;
           } else {
             this.temperature = (Math.random() * 100).toFixed(2) - 0;
             this.humidity = (Math.random() * 100).toFixed(2) - 0;
           }
           //生产
           const resp = await this.$http.get('/output/findYanwu');
           if (resp) {
            // console.log("这是烟雾数据")
            // console.log(resp);
             // this.outList = resp.obj[0];
             this.yanwu = resp.obj.data;
            // console.log(this.yanwu)
           } else {
             this.yanwu = 0.28;
           }
           this.hum();
           this.yw();
         },
        // 这是温湿度仪表盘
          hum(){
            var myChart3 = echarts.init(document.getElementById('tem'));
            var myChart4 = echarts.init(document.getElementById('tem1'));
            var option3 = {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
              },
              toolbox: {
                feature: {
                  restore: {},
                  saveAsImage: {}
                }
              },
              series: [
                {
                  name: '业务指标',
                  type: 'gauge',
                  detail: {formatter: '{value}%'},
                  data: [{value: 50, name: '温度'}]
                }
              ]
            };
            var option4 = {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
              },
              toolbox: {
                feature: {
                  restore: {},
                  saveAsImage: {}
                }
              },
              series: [
                {
                  name: '业务指标',
                  type: 'gauge',
                  detail: {formatter: '{value}%'},
                  data: [{value: 50, name: '湿度'}]
                }
              ]
            };
            // setInterval(function () {
            // console.log("温度是"+this.temperature+",湿度是"+this.humidity+",s烟雾是"+this.yanwu)
            option3.series[0].data[0].value = this.temperature;
            myChart3.setOption(option3, true);
            option4.series[0].data[0].value = this.humidity;
            myChart4.setOption(option4, true);
            // myChart3.setOption(option3);
            // myChart4.setOption(option4);
          },
          yw(){
            var myChart1 = echarts.init(document.getElementById('main1'));
            var value = this.yanwu;

            var data = [value, value, value, value, value,];

            var option1 = {
              backgroundColor: '#fff',
              graphic: [{
                type: 'group',
                left: 'center',
                bottom: 10,
              },
              ],
              series: [{
                type: 'liquidFill',
                radius: '70%',
                center: ['50%', '40%'],
                data: data,
                backgroundStyle: {
                  borderWidth: 5,
                  borderColor: '#1daaeb',
                  color: '#fff'
                },
                label: {
                  normal: {
                    formatter: (value / 10).toFixed(2) + '%',
                    textStyle: {
                      fontSize: 20
                    }
                  }
                }
              },
              ]
            };
            myChart1.setOption(option1);
          }

        },
        created() {
          this.gettingData();
        },
        async mounted() {
          //天气插件  我也不知怎么捣鼓
          // window.WIDGET = {ID: '7athXOL7XL'};
          // (function (d) {
          //     var cs = d.createElement('link');
          //     cs.rel = 'stylesheet';
          //     cs.href = 'https://apip.weatherdt.com/view/static/js/r.js?v=1111';
          //     var s = d.createElement('script')
          //     s.src = 'https://apip.weatherdt.com/view/static/js/r.js?v=1111';
          //     var sn = d.getElementsByTagName('script')[0];
          //     sn.parentNode.insertBefore(cs, sn);
          //     sn.parentNode.insertBefore(s, sn);
          // })(document);
          // 基于准备好的dom，初始化echarts实例

          var myChart = echarts.init(document.getElementById('main'));


          // 指定图表的配置项和数据
          var option = {


            tooltip: {},
            legend: {
              data: ['已使用', '容量']
            },
            xAxis: {
              data: ["仓库", "仓库", "仓库", "仓库"]
            },
            yAxis: {},
            series: [
              {
                name: '已使用',
                type: 'bar',
                data: [5, 20, 36, 10]
              },
              {
                name: '容量',
                type: 'bar',
                data: [5, 20, 36, 10]
              },
            ]
          };
          const res = await this.$http.get('/warehouse/myWarehouse');
          // console.log("这是仓库数据")
          // console.log(res)
          if (res) {
            this.warehouse = res.obj;
            for (let i = 0; i < this.warehouse.length; i++) {
              option.xAxis.data[i] = this.warehouse[i].num + this.warehouse[i].name;
              option.series[0].data[i] = this.warehouse[i].used;
              option.series[1].data[i] = this.warehouse[i].capacity;
            }
          } else {
            option = option;
          }
          //生产
            // console.log(resp)
            // this.outList = resp.obj[0];
            // var value = this.outList.percentage / 100;
          // console.log("温度是"+this.temperature+",湿度是"+this.humidity+",s烟雾是"+this.yanwu)



//生产



          // },2000);
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);

          this.setTime();
        }

    }
</script>

<style lang="less" scoped>
    .tem{
      display: inline-block;
        width: 250px;
       height: 250px;
    }
    .el-row {
        margin-top: 15px;
    }

    .el-progress {
        margin-left: 10px;
        margin-top: 10px;
    }

    .el-col {
        margin-left: 20px;
        padding-left: 20px;
        border-radius: 10px;
        height: 300px;
    }

    .col1 {
        background-color: #FFFFFF;
        padding-left: 40px;
    }

    .col2 {
        padding-left: 10px;
        background-color: #FFFFFF;
    }
</style>